<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>杨青青个人博客</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css" media="all">
    <link href="/static/homeconfig/css/base.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/x-admin.css" media="all">
    <script src="/static/homeconfig/js/jquery.js"></script>
    <script src="/static/homeconfig/js/nav.js"></script>
    <style type="text/css">
        .content{
            width: 650px;
            position: relative;
            left: 30px;
            background-color: #e2eff9;
            border-radius: 20px;
            padding: 10px;
            margin-top: 10px;
            word-wrap: break-word;
        }
        .content:after{
            content: "\00a0";
            display: block;
            position:absolute;
            top:15px;
            left: -20px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 20px 10px 0px;
            border-color: transparent #e2eff9 transparent transparent;
        }
        .tou img{
            width: 60px;
            height: 60px;
        }
        .tou{
            width: 100px;
            height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            background-color: #e3e3e3;
        }
        .float{
            display: flex;
        }

        .button {    background-color: #4CAF50;    border: none;    color: white;    padding: 15px 32px;    text-align: center;    text-decoration: none;    display: inline-block;    font-size: 16px;    margin: 4px 2px;    cursor: pointer;    -webkit-transition-duration: 0.4s; /* Safari */    transition-duration: 0.4s;}.button1:hover {    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
    </style>
</head>
<body>
<!--header end-->
{include file="index/header"}
<!--header end-->
<main>
    {foreach name="date" id="val"}
    <div class="float" style="margin-top: 30px">
        <div class="tou">
            <img src="{$val.src}">
            <text>{$val.u_name}</text>
        </div>
        <div class="content">
            {$val.title}
            <div style="margin-top: 6.5%;margin-left: 75%">{$val.pubdate}</div>
        </div>

    </div>
    {/foreach}
    <div>{$page|raw}</div>
    <div>
        <form class="layui-form" style="margin-top: 50px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label" style="width: 100px;">填写回复</label>
                <div class="layui-input-block">
                    <textarea name="title" placeholder="请输入内容"  class="layui-textarea" style="width: 450px;resize: none"></textarea>
                </div>
                <input name="id" type="hidden" value="{$user.id}">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="*">立即回复</button>
                </div>
            </div>
            <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
        </form>
    </div>
</main>
<!--footer end-->
{include file="index/footer"}
<!--footer end-->
<script src="/static//lib/layui/layui.js" charset="utf-8"></script>
<script src="/static//js/x-layui.js" charset="utf-8"></script>
<script>
    layui.use(['element','layer','form'], function(){
        $ = layui.jquery;//jquery
        lement = layui.element();//面包导航
        layer = layui.layer;//弹出层
        form = layui.form();


        //监听提交
        form.on('submit(*)', function(data){
            $data={
                id:data.field.id,
                title:data.field.title
            }
            $.ajax({
                type:"post",
                url:"{:url('lyadd')}",
                data:$data,
                success:function (res) {
                    if(res.status==1){
                        layer.msg(res.msg,{icon:1,time:1000});
                        setTimeout(function(){
                            window.location.href="javascript:location.replace(location.href);";
                        },1000);
                        return false;
                    }else{
                        layer.msg(res.msg,{icon:2,time:1000});
                    }
                }
            });
            return false;
        });

    })
</script>

</body>
</html>
